<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="main"/>
    <title>Show Game</title>
    <g:javascript library="yui"/>
    <yui:javascript dir="yahoo-dom-event" file="yahoo-dom-event.js"/>
    <yui:javascript dir="dragdrop" file="dragdrop-min.js"/>
    <yui:stylesheet dir="fonts" file="fonts-min.css"/>
    <yui:javascript dir="animation" file="animation-min.js"/>
    <yui:javascript dir="json" file="json-min.js"/>

    <link rel="stylesheet" href="${createLinkTo(dir: 'css', file: 'board.css')}"/>
    <g:javascript src="piecesdata.js"/>
    <g:javascript src="board.js"/>
    <g:javascript src="chess.js"/>

</head>
<body>
<div class="body">

    <div id="canvan">
        <!--	<div id="board"></div>
	<div id="place"></div>
-->
        <div id="pieces"></div>
        <canvas id=board width=500 height=550></canvas>
    </div>


    <div id="list">
        <h1>Game List</h1>
        <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
        </g:if>
        <div id="demo">
            <input type="button" id="demo_btn" value="Get Messages">
            <h1>${id}- ${session.color}</h1>
            <div id="demo_msg"></div>
        </div>
        <table>
            <thead>
            <tr>
                <th>Red Player</th>
                <th>Black Player</th>
            </tr>
            </thead>
            <tbody>
            <g:each in="${gameRounds}" status="i" var="round">
                <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
                    <td>${round?.redMove}</td>
                    <td>${round?.blackMove}</td>
                </tr>
            </g:each>
            </tbody>
        </table>
    </div>
</div>


<script type="text/javascript">
    var gameid = "${id}";
    var color = "${session.color}";
    YAHOO.util.Event.onDOMReady(drawBoard);
    YAHOO.util.Event.on('demo_btn', 'click', drawpiece);
    var t;
    function repeat(){
        drawpiece();
        t=setTimeout("repeat()",1000);
    }
   t=setTimeout("repeat()",1000);
    //chess();
</script>

</body>
</html>
